<!DOCTYPE html>
<html>
<head>
    <title>Queue</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="scripts/dynamicButtons.js"></script>
    <script type="text/javascript" src="scripts/back.js"></script>
    <script type="text/javascript" src="scripts/jquery-2.0.1.min.js"></script>   
    <script type="text/javascript" src="scripts/fade.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <link type="text/css" href="scripts/jquery.toastmessage-min.css" rel="stylesheet"/>
    <script type="text/javascript" src="scripts/jquery.toastmessage-min.js"></script>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
  $(function(){
        var removeIntent = false;
        $('#sortme').sortable({
            over: function () {
                removeIntent = false;
            },
            out: function () {
                removeIntent = true;
            },
            beforeStop: function (event, ui) {
                if(removeIntent == true){
                    ui.item.remove();   
                }
            }
        });
    });
});//]]>  

</script>


</head>
<body id="background">
    <div id="content">
    
	<div class="transparentBg" id="back-button">
	    <a onclick="goBack()">
		<img id="back-icon" src="images/back-icon.png" />
	    </a>
	</div>
	
	<div class="transparentBg" id="musicList">
	    <div class="centreText"><h2>Play Queue</h2></div>
	    <div id="play-queue" >
	    <p class="tooltips">The play queue is built dynamically based on your preferences. You can remove songs by swiping them away.</p>
			
			<ul id='sortme'>
			    <li class=".queue-list-li"><div class="queue-list-item">
			    <img src="images/album-hc.jpg">
			    <h3>Colours</h3>
			    <p>Hot Chip</p>  
			    </div></li>
			    
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-p.jpg" />
				<h3>Lasso</h3>
				<p>Phoenix</p>
			    </div></li>
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-ok.jpg" />
				<h3>This Too Shall Pass</h3>
				<p>Ok Go</p>
			    </div></li>
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-ws.jpg" />
				<h3>Seven Nation Army</h3>
				<p>The White Stripes</p>
			    </div></li>
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-rh.jpg" />
				<h3>Idiotique</h3>
				<p>Radiohead</p>
			    </div></li>
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-xx.jpg" />
				<h3>VCR</h3>
				<p>XX</p>
			    </div></li>
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-mg.jpg" />
				<h3>Flash Delirium</h3>
				<p>MGMT</p>
			    </div></li>
			    
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
			    </div></li>
			    
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-k.jpg" />
				<h3>Somebody Told me</h3>
				<p>Killers</p>
			    </div></li>
			    <li class=".queue-list-li"><div class="queue-list-item">
				<img src="images/album-af.jpg" />
				<h3>Ready To Start</h3>
				<p>Arcade Fire</p>
			    </div></li>
			    
			</ul>

	    </div>
	</div>
	
	<div id="settings-button" class="transparentBg">
	    <a href="settings.html"><img id="settings-icon" src="images/settings-icon.png"></a>
	</div>
	
	<div id="navigation-bar" class="transparentBg">
	    <div class="navigation-button">
		<a onclick="thumbsdown()" ><img name="thumbsDown" src="images/thumbs/down.jpg" /></a>
	    </div>
	    <div class="navigation-button">
		<a onclick="goBack()">
		<img src="images/list.jpg" />
		</a>
	    </div>
	    <div class="navigation-button">
		<a onclick="playPause()" ><img name="playpause" src="images/play.jpg" /></a>
	    </div>
	    <div class="navigation-button">
		<img src="images/next.jpg" />
	    </div>
	    <div class="navigation-button">
		<a onclick="thumbsup()" ><img name="thumbsUp"  src="images/thumbs/up.jpg" /></a>
	    </div>
	</div>
	<div id="cloud-button" class="transparentBg">
	    <a onclick="cloudsVisible()"><img id="cloud-icon" src="images/cloud-icon.png"></a>
	</div>
	
    </div>
</html>
</body>